<template>
<div id="Home" class="page">
  <van-sticky >
    <div class="head">
    <div class="head-left"><van-image radius="100%"  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F24%2F20171024071632_hzJ8n.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633526278&t=c2e8907e8e72b9457ae379daf7bd723c"></van-image></div>
    <div class="head-center">显盒</div>
    <div class="head-right">我的记录&nbsp;</div>
    </div>

  </van-sticky>
  <div class="home-swipe">
      <van-swipe  :autoplay="3000" indicator-color="white">
        <van-swipe-item><van-image fit="fit" radius="20px" src="" /></van-swipe-item>
        <van-swipe-item><van-image fit="fit" radius="20px" src="https://img0.baidu.com/it/u=1193501072,1353942016&fm=26&fmt=auto&gp=0.jpg" /></van-swipe-item>
        <van-swipe-item><van-image fit="fit" radius="20px" src="https://img2.baidu.com/it/u=2378033995,1946259002&fm=26&fmt=auto&gp=0.jpg" /></van-swipe-item>
        <van-swipe-item><van-image fit="fit" radius="20px" src="https://img1.baidu.com/it/u=2899709105,3514654290&fm=26&fmt=auto&gp=0.jpg" /></van-swipe-item>
      </van-swipe>
  </div>
  <van-panel class="real-time-info" title="最新资讯" icon-color="#ee0a24" icon='fire-o' >
    <div>
      <van-skeleton title avatar :row="3" />
    </div>
  </van-panel>

  <van-panel class="box-panel" title="往期开盒" icon="send-gift-o" >
    <div class="box">
      <van-card
        desc="2021年09月06日 12点 开出苹果平板电脑一台."
        title="苹果平板电脑"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
        <div slot="tag" class="">
          <van-tag mark type="danger">蛮显火</van-tag>
        </div>
        <div slot="title">
            <span style="font-size: 2vh;margin-bottom: 1vh">苹果平板电脑</span>
          </div>
        <div slot="desc">
          <div>
            恭喜老王
            <van-image fit="fit" width="5vh" height="5vh" radius="20px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F24%2F20171024071632_hzJ8n.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633526278&t=c2e8907e8e72b9457ae379daf7bd723c" />
            ,<span style="color: #1f7be5">2021年09月06日 12点</span> 开出<span style="color:red">苹果平板电脑</span>一台.
          </div>
        </div>
        </van-card>
      <van-card
        desc="2021年09月06日 12点 开出苹果平板电脑一台."
        title="苹果平板电脑"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
        <div slot="tag" class="">
          <van-tag mark type="warning">蛮显火</van-tag>
        </div>
        <div slot="title">
          <span style="font-size: 2vh;margin-bottom: 1vh">苹果平板电脑</span>
        </div>
        <div slot="desc">
          <div>
            恭喜老王
            <van-image fit="fit" width="5vh" height="5vh" radius="20px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F24%2F20171024071632_hzJ8n.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633526278&t=c2e8907e8e72b9457ae379daf7bd723c" />
            ,<span style="color: #1f7be5">2021年09月06日 12点</span> 开出<span style="color:red">苹果平板电脑</span>一台.
          </div>
        </div>
      </van-card>
      <van-card
        desc="2021年09月06日 12点 开出苹果平板电脑一台."
        title="苹果平板电脑"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
        <div slot="tag" class="">
          <van-tag mark type="primary">蛮显火</van-tag>
        </div>
        <div slot="title">
          <span style="font-size: 2vh;margin-bottom: 1vh">苹果平板电脑</span>
        </div>
        <div slot="desc">
          <div>
            恭喜老王
            <van-image fit="fit" width="5vh" height="5vh" radius="20px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F24%2F20171024071632_hzJ8n.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633526278&t=c2e8907e8e72b9457ae379daf7bd723c" />
            ,<span style="color: #1f7be5">2021年09月06日 12点</span> 开出<span style="color:red">苹果平板电脑</span>一台.
          </div>
        </div>
      </van-card>
      <div style="height: 5vh"></div>
    </div>
  </van-panel>

</div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
      pageinfo: {
        name: '首页'
      }
    }
  }
}
</script>

<style scoped>
.home-swipe {
  margin-top: 1vh;
}
.home-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 19vh;
  width: 100%;
  text-align: center;
}
.home-swipe .van-swipe-item .van-image{
  height: 100%;
  width: 95%;
}
.real-time-info {
  height: 29vh;
  margin-top: 1vh;
}
.box-panel {
  margin-top: 1vh;
}
.box {
  margin-top: 1vh;
  height: 35vh;
  overflow-x: auto;
}
.head {
  height: 6vh;
  width: 100%;
  background: #fff;
}
.head-left {
  float: left;
  width: 20%;
}
.head-left .van-image {
  height: 5vh;
  width: 5vh;
  margin-left: 0.5vh;
  margin-top: 0.5vh;
}
.head-center {
  float: left;
  width: 60%;
  text-align: center;
  font-size: 3vh;
  padding-top: 1.5vh;
}
.head-right {
  float: right;
  width: 20%;
  text-align: right;
  font-size: 2vh;
  padding-top: 2vh;
  color: #919191;
}
</style>
